<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: { type: Array, default: null },   // null 或 ['YYYY-MM-DD','YYYY-MM-DD']
  clearable: { type: Boolean, default: true },
  placeholder: { type: Array, default: () => ['开始日期', '结束日期'] },
  floorCeil: { type: Boolean, default: true },
  styleWidth: { type: String, default: '260px' },
  styleHeight: { type: String, default: '27px' },
  // ✅ 加回快捷选项（Element Plus 需要 Date 对象）
  shortcuts: {
    type: Array,
    default: () => [
      {
        text: '今天',
        value: () => {
          const d = new Date()
          return [d, d]
        }
      },
      {
        text: '近7天',
        value: () => [new Date(Date.now() - 6 * 86400000), new Date()]
      },
      {
        text: '近30天',
        value: () => [new Date(Date.now() - 29 * 86400000), new Date()]
      }
    ]
  }
})

const emits = defineEmits(['update:modelValue', 'change', 'normalized'])

const innerValue = computed({
  get() {
    return Array.isArray(props.modelValue) && props.modelValue.length === 2
      ? props.modelValue
      : null
  },
  set(val) {
    emits('update:modelValue', val)
    emits('change', val)
  }
})

function onChange(val) {
  emits('update:modelValue', val)
  emits('change', val)

  if (!val || val.length !== 2) {
    emits('normalized', null)
    return
  }
  if (!props.floorCeil) return

  const [d1, d2] = val
  const out = [
    d1 ? `${d1} 00:00:00` : '',
    d2 ? `${d2} 23:59:59` : ''
  ]
  emits('normalized', out)
}
</script>

<template>
  <el-date-picker
    v-model="innerValue"
    type="daterange"
    unlink-panels
    range-separator="至"
    :start-placeholder="placeholder[0]"
    :end-placeholder="placeholder[1]"
    :clearable="clearable"
    :shortcuts="shortcuts"         
    value-format="YYYY-MM-DD"
    format="YYYY-MM-DD"
    :style="{ width: styleWidth,height:styleHeight}"
    @change="onChange"
    
  />
</template>
